<template>
	<view>
		<cu-custom :bgColor="globalColor" :isBack="true">
			<block slot="content">视频转gif</block>
		</cu-custom>
		<view class="solids video padding-sm">
			<view @tap="upload">
				<text class='cuIcon-cameraadd' style="font-size: 40px;"></text>
			</view>
			<view @tap="upload">
				<text>点我上传视频</text>
			</view>
		</view>
		<view class="padding-sm" v-if="result">
			<video class="video-play" v-bind:src="tempFilePath" />
		</view>
		<view class="padding-sm" v-if="showMusic">
			<image :src="resultImg"></image>
		</view>

		<view class="padding-sm flex flex-direction" style="margin-top: -7px;" @click="complete()" v-if="result">
			<button class="cu-btn bg-cyan">开始转gif</button>
		</view>

		<view class="box" v-if="showMusic">
			<cmd-progress :percent="percent" :success-percent="percent" stroke-color="white" custom>
				<text style="color: #009688;">{{percent}}%</text>
			</cmd-progress>
			<view class="cu-bar btn-group">
				<button class="cu-btn bg-orange shadow-blur" @click="copyMusic">复制图片链接</button>
				<button class="cu-btn bg-green  shadow" @click="downloadFile">保存到相册</button>
			</view>
		</view>
	</view>
</template>

<script>
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	export default {
		components: {
			cmdProgress
		},
		data() {
			return {
				tempFilePath: '',
				result: false,
				text: '',
				handleFaceStatus: false,
				resultImg: '',
				musicUrl: '',
				showMusic: false,
				percent: 0,
				globalColor: getApp().globalData.globalColor
			}
		},
		onLoad() {

		},
		methods: {
			copyMusic() {
				var that = this;
				uni.setClipboardData({
					data: that.tempFilePath,
					success: function() {
						uni.setStorageSync(that.tempFilePath, that.tempFilePath)
						uni.showModal({
							content: '已经复制链接到剪切板,请粘贴到浏览器下载'
						})
					}
				});
			},
			upload() {
				var that = this;
				uni.chooseVideo({
					count: 1, //默认9
					sourceType: ['album'], //从相册选择
					success: (res) => {
						that.showMusic = false;
						var size = (res.size / (1024 * 1024)).toFixed(2);
						console.log("视频大小:" + size)
						if (size > 30) {
							uni.showModal({
								content: "视频超过30M,暂时无法处理"
							})
							return
						}
						that.tempFilePath = res.tempFilePath
						that.result = true
					}
				});
			},
			complete() {
				var that = this;
				uni.showLoading({
					title: '处理中'
				})
				var globaData = getApp().globalData;
				uni.uploadFile({
					url: that.$qrCodeUrl + "/upload/file", //仅为示例，非真实的接口地址
					filePath: that.tempFilePath,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (res) => {
						var uploadData = JSON.parse(res.data).data;
						//开始执行提取音频操作
						wx.login({
							success(res) {
								const code = res.code;
								uni.request({
									url: that.$qrCodeUrl + '/upload/videoToGif',
									data: {
										code: code,
										filePath: uploadData,
										source: that.$source
									},
									method: "POST",
									success: (res) => {
										console.log(res.data)
										that.result = false
										uni.showToast({
											title: '转化成功'
										})
										if (res.data.code === '0001') {
											console.log(res.data)
											that.resultImg = res.data.data
											that.showMusic = true
										} else {
											uni.showModal({
												content: '未知错误，请联系作者进行解决'
											})
										}
									},
									fail(res) {
										uni.showModal({
											content: '去除失败，请联系作者进行解决'
										})
									},
									complete(res) {
										uni.hideLoading();
									}
								});
							}
						})
					},
					fail(res) {
						uni.showModal({
							content: '上传失败，请联系作者进行解决'
						})
						uni.hideLoading()
					}
				});
			},
			downloadFile() {
				var that = this;
				uni.showLoading({
					title: '加载下载资源中'
				})
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success() {
						that.percent = 0;
						that.fileStatus = 'active'
						//请求视频真实地址
						const downloadTask = uni.downloadFile({
							url: that.resultImg, //仅为示例，并非真实的资源
							success: (res) => {
								if (res.statusCode === 200) {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath
									})
								}
							},
							fail: function() {
								uni.showModal({
									content: '下载失败，请复制无水印链接到浏览器下载'
								})
							}
						});
						downloadTask.onProgressUpdate((res) => {
							that.percent = res.progress;
							if (res.progress == 100) {
								uni.showToast({
									icon: 'success',
									title: '文件已保存到相册'
								})
							}
						});
					},
					fail: (res) => {
						uni.showModal({
							content: '您没有同意相册权限,视频无法保存[请点击小程序右上角设置按钮 开启相册权限]'
						})
					},
					complete: (res) => {
						uni.hideLoading();
					}
				})
			}
		}
	}
</script>

<style>
	.video {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100px;
		background: white;
	}

	.video-play {
		width: 100%;
		height: 240px;
	}

	.music {
		background: red;
	}

	.img {
		width: 100%;
		text-align: center;
	}

	.font-color {
		color: #0081FF;
	}

	.remo-color {
		color: red;
	}
</style>